<template>
  <el-card class="default-table" ref="middleCard">
    <template #header>
      <div class="table-middleware" ref="middlewareButton">
        <div class="middleware-context">
          {{ props.tableConfig.middlewareContext ?? "数据列表" }}
        </div>
        <div class="middleware-button">
          <slot name="middleware"></slot>
        </div>
      </div>
    </template>
    <client-only>
      <el-table
        :data="props.tableData"
        :height="props.tableConfig.height ?? 530"
        :border="props.tableConfig.border ?? true"
        :stripe="props.tableConfig.stripe ?? true"
        :size="props.tableConfig.size ?? 'default'"
        @selection-change="handlerSelectionChange"
      >
        <el-table-column
          type="selection"
          align="center"
          v-if="props.tableConfig.needSelection"
        />
        <el-table-column
          type="index"
          header-align="center"
          width="80"
          label="序号"
          v-if="props.tableConfig.needIndex"
          :align="props.tableConfig.indexAlign ?? 'left'"
        />
        <el-table-column
          v-for="item in props.tableColumn"
          :label="item.label"
          :key="item.prop"
          :prop="item.prop"
          header-align="center"
          :align="item.align ?? 'left'"
        />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          v-if="props.tableConfig.needOperation"
        >
          <template #default="scope">
            <slot name="operation" v-bind="scope"></slot>
          </template>
        </el-table-column>
      </el-table>
    </client-only>
    <div class="pagination" ref="pagination">
      <el-pagination
        :current-page="props.paginationConfig.page ?? 1"
        :page-size="props.paginationConfig.pageSize ?? 10"
        :page-sizes="props.paginationConfig.pageSizes ?? [10, 20, 50, 100]"
        :small="props.paginationConfig.small ?? false"
        :disabled="props.paginationConfig.disabled ?? false"
        :background="props.paginationConfig.background ?? true"
        layout="total, sizes, prev, pager, next"
        :total="props.paginationConfig.total ?? 11"
        :hide-on-single-page="false"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup>
const props = defineProps({
  tableConfig: {
    type: Object,
    default: {},
  },
  tableData: {
    type: Array,
    default: [],
  },
  tableColumn: {
    type: Array,
    default: [],
  },
  paginationConfig: {
    type: Object,
    default: {},
  },
});
const emit = defineEmits(["selectionChange", "currentChange", "sizeChange"]);
const handlerSelectionChange = (selection) => {
  emit("selectionChange", selection);
};
const handleCurrentChange = (val) => {
  emit("currentChange", val);
};
const handleSizeChange = (val) => {
  emit("sizeChange", val);
};
</script>

<style lang="less" scoped>
.default-table {
  .table-middleware {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
  }
}
</style>
